/*
 * @Author: wuhao930406 1148547900@qq.com
 * @Date: 2023-10-08 15:39:45
 * @LastEditors: wuhao930406 1148547900@qq.com
 * @LastEditTime: 2023-10-08 17:06:52
 * @FilePath: /legion-iot/src/pages/dashboard/components/Devices.jsx
 * @Description:
 *
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
 */
import React, { useState, useEffect } from "react";
import ReactECharts from "echarts-for-react";
import * as echarts from "echarts";
import { theme, Progress } from "antd";

const colors = {
  0:{ "0%": '#ADD100', "100%": '#7B920A' },
  1:{ "0%": '#FBD3E9', "100%": '#BB377D' },
  2:{ "0%": '#606c88', "100%": '#3f4c6b' },
  3:{ "0%": '#C9FFBF', "100%": '#FFAFBD' },
  4:{ "0%": '#649173', "100%": '#DBD5A4' },
  5:{ "0%": '#B993D6', "100%": '#8CA6DB' },
}




function Waring({ data }) {
  const {
    token: {
      colorBgContainer,
      colorTextBase,
      colorBgSecondary,
      colorPrimary,
      colorBgThird,
      colorBorder,
    },
  } = theme.useToken();

  return (
    <div
      style={{
        flex: 1,
        overflow: "hidden",
        display: "grid",
        gridTemplateColumns: "repeat(3, 1fr)",
        gap: 10,
        padding: "10px 0",
      }}
    >
      {data?.bikearr?.map((it, i) => (
        <div key={i} className="center">
          <Progress
            type="dashboard"
            status="active"
            percent={50}
            size="small"
            strokeColor={colors[i]}
            format={(percent, successPercent) => {
              return <div style={{display:"flex",flexDirection:"column",gap:6}}>
                <b>{it?.num}</b>
                <span style={{fontSize:12}}>{it?.text}</span>
              </div>;
            }}
          />
        </div>
      ))}
    </div>
  );
}

export default Waring;
